<template>
  <el-popover placement="bottom" trigger="click" style="line-height: 1">
    <div class="column-setting-container">
      <div class="header">
        <el-checkbox
          :indeterminate="isColumnCheckboxIndeterminate"
          v-model="columnCheckAll"
          @change="handleCheckAllChange"
        >列展示</el-checkbox>
        <el-button type="text" size="medium" @click="resetColumns">重制</el-button>
      </div>
      <div class="content">
        <el-checkbox-group v-model="checkedColumns" @change="handleCheckedColumnsChange">
          <template v-show="fixedLeftColumns.length > 0">
            <div class="title" v-show="fixedLeftColumns.length > 0">固定在左侧</div>
            <div v-for="column in fixedLeftColumns" :key="column.prop" class="checkbox-item">
              <el-checkbox :label="column.prop">{{column.label}}</el-checkbox>
              <div class="icon">
                <el-tooltip effect="dark" content="取消固定" placement="top">
                  <i class="iconfont icon-vertical-align-middle" @click="fixColumn(column, null)"></i>
                </el-tooltip>
                <el-tooltip effect="dark" content="固定到右边" placement="top">
                  <i class="iconfont icon-right-pushpin" @click="fixColumn(column, 'right')"></i>
                </el-tooltip>
              </div>
            </div>
          </template>
          <template v-show="unFixedColumns.length > 0">
            <div v-show="unFixedColumns.length !== columns.length" class="title">不固定</div>
            <div v-for="column in unFixedColumns" :key="column.prop" class="checkbox-item">
              <el-checkbox :label="column.prop">{{column.label}}</el-checkbox>
              <div class="icon">
                <el-tooltip effect="dark" content="固定到右边" placement="top">
                  <i class="iconfont icon-right-pushpin" @click="fixColumn(column, 'right')"></i>
                </el-tooltip>
                <el-tooltip effect="dark" content="固定到左边" placement="top">
                  <i class="iconfont icon-left-pushpin" @click="fixColumn(column, 'left')"></i>
                </el-tooltip>
              </div>
            </div>
          </template>
          <template v-show="fixedRightColumns.length > 0">
            <div class="title" v-show="fixedRightColumns.length > 0">固定在右侧</div>
            <div v-for="column in fixedRightColumns" :key="column.prop" class="checkbox-item">
              <el-checkbox :label="column.prop">{{column.label}}</el-checkbox>
              <div class="icon">
                <el-tooltip effect="dark" content="固定到左边" placement="top">
                  <i class="iconfont icon-left-pushpin" @click="fixColumn(column, 'left')"></i>
                </el-tooltip>
                <el-tooltip effect="dark" content="取消固定" placement="top">
                  <i class="iconfont icon-vertical-align-middle" @click="fixColumn(column, null)"></i>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-checkbox-group>
      </div>
    </div>
    <el-tooltip effect="dark" content="列设置" placement="top" slot="reference">
      <i class="el-icon-setting"></i>
    </el-tooltip>
  </el-popover>
</template>

<script>
export default {
  name: 'TableHeaderSetting',
  props: {
    columns: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      isColumnCheckboxIndeterminate: false,
      columnCheckAll: true,
      checkedColumns: this.columns.map(({ prop }) => prop),
    };
  },
  computed: {
    showFixedHeader() {
      return this.columns.some(({ fixed }) => !!fixed);
    },
    fixedLeftColumns() {
      return this.columns.filter(({ fixed }) => fixed === 'left');
    },
    fixedRightColumns() {
      return this.columns.filter(({ fixed }) => fixed === 'right');
    },
    unFixedColumns() {
      return this.columns.filter(({ fixed }) => fixed === null);
    },
  },
  methods: {
    fixColumn(column, fixed) {
      column.fixed = fixed;
    },
    resetColumns() {
      this.columnCheckAll = true;
      this.columns.forEach((column) => (column.fixed = null));
      this.checkedColumns = this.columns.map(({ prop }) => prop);
    },
    handleCheckAllChange(val) {
      this.checkedColumns = val ? this.columns.map(({ prop }) => prop) : [];
      this.isColumnCheckboxIndeterminate = false;
    },
    handleCheckedColumnsChange(value) {
      const checkedCount = value.length;
      this.columnCheckAll = checkedCount === this.columns.length;
      this.isColumnCheckboxIndeterminate =
        checkedCount > 0 && checkedCount < this.columns.length;
    },
  },
  watch: {
    checkedColumns: {
      handler: function() {
        const mapCheckedColumns = this.columns.filter(
          ({ prop }) => this.checkedColumns.indexOf(prop) !== -1,
        );
        this.$emit('change', mapCheckedColumns);
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.column-setting-container {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid $third-border-color;
  }
  .content {
    .el-checkbox-group {
      .title {
        font-size: 13px;
        &:last-child {
          margin: 0;
        }
      }
      .title {
        margin: 8px 0;
        font-size: 12px;
        color: $font-third-color;
      }
      .checkbox-item {
        margin: 8px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &:last-child {
          margin: 0;
        }
        &:hover {
          .icon {
            visibility: inherit;
          }
        }
        .el-checkbox {
          flex: 1;
        }
        .icon {
          display: flex;
          justify-content: space-between;
          align-items: center;
          visibility: hidden;
          .iconfont {
            cursor: pointer;
            width: auto;
            margin-right: 0;
            font-size: 12px;
            color: $font-third-color;
            &:first-child {
              margin-right: 4px;
            }
          }
        }
      }
    }
  }
}
.iconfont {
  cursor: pointer;
}
</style>